<template>
  <el-upload 
    ref="upload" 
    class="upload-demo" 
    action="http://127.0.0.1:8080/upload" 
    :limit="1" 
    :on-exceed="handleExceed" 
    :auto-upload="false"
  >
    <template #trigger>
      <el-button type="primary">选择文件</el-button>
    </template>
    <el-button class="ml-3" type="success" @click="submitUpload">
      导入文件
    </el-button>
    <template #tip>
      <div class="el-upload__tip text-red">
        限制1个文件，新文件将覆盖旧文件
      </div>
    </template>
  </el-upload>
  
  <!-- 按钮绑定事件 -->
  <el-popconfirm width="220" :icon="InfoFilled" icon-color="#626AEF" title="是否打印设备台账?" @confirm="onCancel">
    <template #reference>
      <el-button>打印</el-button>
    </template>
    <template #actions="{confirm, cancel}">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button type="danger" size="small"  @click="confirm">确认</el-button>
    </template>
  </el-popconfirm>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import { genFileId } from 'element-plus';
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { InfoFilled } from '@element-plus/icons-vue'

const upload = ref<UploadInstance>();

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

const submitUpload = () => {
  upload.value!.submit()
}


// 下载文件
function onCancel() {
  window.open('http://localhost:8080/download');
}


</script>
